<template>
  <div id="arcontainer">
    <div class="go">
      <span @click="goback">返回</span>
    </div>
    <vue-scroll :ops="ops">
      <div class="scollbox">
        <div id="articlebox">
          <div class="titlebox">
            <div class="decorated"></div>
            <div class="title" v-html="content.title"></div>
          </div>
          <div id="arother">
            <span>
              <i class="el-icon-view"></i>
              {{ views }}
            </span>
            <span>
              <i class="el-icon-s-grid"></i>
              {{ this.category[0] }}
            </span>
            <span>
              <i class="el-icon-date"></i>
              {{ content.date }}
            </span>
          </div>
          <div v-highlight class="markdown-body" v-html="content.content"></div>
          <comment :id="id" :title="content.title"></comment>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import { GetArticle } from "../../api/index"
import "mavon-editor/dist/css/index.css"
import Comment from "../../components/comment/comment"
export default {
  data() {
    return {
      comment: [],
      id: "",
      category: [],
      content: {},
      views: null,
      distance: null, //home页面滚动条滚动的距离
      page: null, //home页面传递的页码
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {},
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: false,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  components: {
    Comment,
  },
  created() {
    // 接收home传递过来的页码和vuescroll滚动的距离
    // console.log(this.$EventBus);
    const { distance, page, id } = this.$route.query
    this.id = id
    this.distance = distance
    this.page = page
    this.getarticle()
  },

  watch: {
    // 监听路由参数改变来解决搜索文章点击搜索结果，页面无法更新的问题
    $route: function(newVal, oldVal) {
      this.getarticle()
    },
  },
  methods: {
    async getarticle() {
      let res = await GetArticle({ id: this.$route.query.id })
      // console.log(this.$route.query, res);
      this.content = res.data[0]
      this.comment = res.comment
      this.category = this.content.category
      this.views = this.content.views
    },
    goback() {
      this.$router.push({
        path: "/home",
        query: { distance: this.distance, page: this.page },
      })
    },
  },
}
</script>
<style lang="scss">
#arcontainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .go {
    z-index: 999;
    position: absolute;
    right: 15px;
    top: calc(50vh - 45px);
    width: 50px;
    box-shadow: 0 10px 8px rgba(10, 16, 20, 0.24),
      0 0 8px rgba(10, 16, 20, 0.12);
    overflow: hidden;
    border-radius: 5px;
    span {
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid white;
      display: inline-block;
      height: 45px;
      width: 100%;
      line-height: 45px;
      text-align: center;
      background: #409eff;
      color: white;
      transition: 0.5s;
      font-size: 16px;
      font-weight: 900;
    }
    span:hover {
      cursor: pointer;
      opacity: 0.6;
    }
  }
}
.scollbox {
  width: 100%;
  margin: 20px 0px;
  display: flex;
  justify-content: center;
}
#articlebox {
  width: 900px;
  background: white;
  margin: 20px 0px;
  padding: 10px 40px;
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid gainsboro;
  }
  .titlebox {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    position: relative;
  }
  .decorated {
    position: absolute;
    height: 90px;
    width: 9px;
    top: -20px;
    left: -40px;
    background: rgb(32, 121, 173);
  }
  #arother {
    span {
      font-size: 16px;
      color: rgb(192, 191, 191);
    }
    text-align: right;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 20px;
  }

  #arother > span {
    margin-left: 20px;
  }
  img {
    margin-top: 10px;
    max-width: calc(100% - 160px);
  }
}
.markdown-body {
  padding-bottom: 20px;
}
</style>
